<template>
  <ComWrapper>
    <el-alert title="来自AVUE的灵感, 业务会有表单里含有对象数组的可能, 进行封装后进行增删改操作, 并且支持联动form表单的禁用属性" type="success" style="margin-bottom:20px;"></el-alert>

    <el-card shadow="never">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="表格" prop="list">
          <FormTable v-model="form.list" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
            <el-table-column prop="time" label="时间" width="180">
              <template #default="scope">
                <el-time-select v-model="scope.row.time" />
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="180">
              <template #default="scope">
                <el-select v-model="scope.row.type" placeholder="请选择">
                  <el-option v-for="item in typeDic" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="val" label="数量" width="180">
              <template #default="scope">
                <el-input v-model="scope.row.val" placeholder="请输入内容" />
              </template>
            </el-table-column>
            <el-table-column prop="open" label="checked" width="85" align="center">
              <template #default="scope">
                <el-checkbox v-model="scope.row.checked" />
              </template>
            </el-table-column>
            <el-table-column prop="open" label="开关" width="80" align="center">
              <template #default="scope">
                <el-switch v-model="scope.row.open" />
              </template>
            </el-table-column>
          </FormTable>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </ComWrapper>
</template>

<script setup>
import {ref, defineAsyncComponent} from 'vue'

const FormTable = defineAsyncComponent(() => import('@/components/FormTable'))

const ruleForm = ref(null)
const addTemplate = ref({
  time: '',
  type: '',
  val: '',
  open: true,
  checked: false
})
const form = ref({
  title: '标题',
  list: [
    {time: '09:00', type: '1', val: '100', open: true, checked: true},
    {time: '10:00', type: '0', val: '50', open: false, checked: true}
  ]
})
const rules = ref({
  title: [{required: true, message: '请上传', trigger: 'blur'}]
})
const typeDic = ref([
  {label: '全局', value: '0' },
  {label: '局部', 	value: '1'}
])

function submitForm() {
  ruleForm.value.validate(valid => {
    if (valid) {
      alert('请看控制台输出')
      console.log(this.form)
    }
  })
}
function resetForm(){
  ruleForm.value.resetFields()
}
</script>